<template>
    <div style="">
      <div ref="money" style="width: 100%;height:400px;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
      name:'moneyPie',
      props:['userPayList','default1'],
      data(){
          return{
  
          }
      },
      watch: {
        userPayList: function (newVal, oldVal) {
      this.initChart();
    },
  },
      mounted(){
          this.initChart()
      },
      methods:{
initChart() {
  var chartDom = this.$refs.money;
  var myChart = echarts.init(chartDom);
  var option;

  let arr = [];
  for (let index = 0; index < this.userPayList.length; index++) {
    const element = this.userPayList[index];
    let item = [Number(element.cnt), Number(element.countMoney), element.sendernick, element.tid];
    arr.push(item);
  }
  const data = arr;
  console.log(data);
  option = {
  title: {
    text: this.$t('analyze.jiaoyiduixiangjine'),
    left: 'center',
    top: '10px'
  },
  grid: {
    left: '8%',
    top: '14%'
  },
  xAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    },
    axisLabel: {
    formatter: function (value) {
      // 根据需要格式化 Y 轴上的数字
      if (value >= 1e9) {
        return (value / 1e9).toFixed(2) + 'B';  // 以十亿为单位显示，保留两位小数
      } else if (value >= 1e6) {
        return (value / 1e6).toFixed(2) + 'M';  // 以百万为单位显示，保留两位小数
      } else {
        return value.toFixed(2);  // 其他情况保留两位小数
      }
    }
    },
    scale: true
  },
  dataZoom: [
    {
      type: 'inside', // 启用内置的缩放功能
      xAxisIndex: 0, // 表示缩放控制对应 x 轴
      filterMode: 'empty' // 设置缩放范围是空白区域
    },
    {
      type: 'inside', // 启用内置的缩放功能
      yAxisIndex: 0, // 表示缩放控制对应 y 轴
      filterMode: 'empty' // 设置缩放范围是空白区域
    }
  ],
  tooltip: {
    formatter: function (params) {
      const data = params.data.value;
      return `${$t('analyze.jiaoyiObject')}: ${data[2]}<br/>${$t('analyze.jiaoyiNumber')}: ${data[0]}<br/>${$t('analyze.jianyiVal')}: ${data[1]}元`;
    }
  },
  series: [
    {
      name: '1990',
      data: data.map(item => ({
        value: [item[0], item[1], item[2], item[3]],
        symbolSize: Math.sqrt(item[1]) / 10,
        symbolOffset: [Math.random() * 50, Math.random() * 50] // 随机偏移
      })),
      type: 'scatter',
      label: {
        show: true,
        formatter: function (param) {
          return param.data.value[1];
        },
        textStyle: {
          color: 'black' // 标签文本颜色
        },
        position: 'top'
      },

      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
          {
            offset: 0,
            color: 'rgb(251, 118, 123)'
          },
          {
            offset: 1,
            color: 'rgb(204, 46, 72)'
          }
        ])
      }
    },
    {
      name: '2015',
      data: data.map(item => ({
        value: [item[0], item[1], item[2], item[3]],
        symbolSize: Math.sqrt(item[1]) / 10,
        symbolOffset: [Math.random() * 50, Math.random() * 50] // 随机偏移
      })),
      type: 'scatter',
      label: {
        show: true,
        formatter: function (param) {
          return param.data.value[2];
        },
        textStyle: {
          color: 'black' // 标签文本颜色
        },
        position: 'top'
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(25, 100, 150, 0.5)',
        shadowOffsetY: 5,
        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
          {
            offset: 0,
            color: 'rgb(129, 227, 238)'
          },
          {
            offset: 1,
            color: 'rgb(25, 183, 207)'
          }
        ])
      }
    }
  ]
};


  option && myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}


      }
  }
  </script>
  
  <style>
  
  </style>